<template>
  <div class="format-font">
    <Modal v-model="taskActionModal" :closable="false" :footer-hide="true" :mask-closable="false" :title="action.title + '传输表'" width="800px">
      <el-form ref="form" :model="newTaskForm" label-width="130px">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="源实例类型" prop="sourceInstanceType" size="small">
              <el-input v-model="jobInfo.sourceInstanceType" disabled style="width: 200px" type="text"></el-input>
            </el-form-item>
            <el-form-item label="源实例" prop="sourceInstance" size="small">
              <el-input v-model="jobInfo.sourceInstance.host" disabled style="width: 200px" type="text"></el-input>
            </el-form-item>
            <el-form-item label="源实例DB" prop="sourceDatabase" size="small">
              <el-input v-model="jobInfo.sourceDatabase.name" disabled style="width: 200px" type="text"></el-input>
            </el-form-item>
            <el-form-item label="源实例表" prop="sourceTableId" size="small" style="width: 200px">
              <el-select
                v-model="newTaskForm.sourceTable"
                size="mini"
                style="width: 200px"
                placeholder="请选择"
                class="form-item-width"
                :popper-append-to-body="false"
                popper-class="options-content"
                @change="updateDestTable"
              >
                <el-option v-for="item in sourceTableDatas" :key="item.id" :label="item.name" :value="item.name">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标实例类型" prop="destInstanceType" size="small">
              <el-input v-model="jobInfo.destInstanceType" disabled style="width: 200px" type="text"></el-input>
            </el-form-item>
            <el-form-item label="目标实例" prop="destInstance" size="small">
              <el-input v-model="jobInfo.destInstance.host" disabled style="width: 200px" type="text"></el-input>
            </el-form-item>
            <el-form-item label="目标实例DB" prop="destDatabase" size="small">
              <el-input v-model="jobInfo.destDatabase.name" disabled style="width: 200px" type="text"></el-input>
            </el-form-item>
            <el-form-item label="目标实例表" prop="destTable" size="small" style="width: 200px">
              <el-input
                v-model="newTaskForm.destTable"
                size="mini"
                style="width: 200px"
                placeholder="请选择"
                class="form-item-width"
                :popper-append-to-body="false"
                popper-class="options-content"
                disabled
              >
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="目标实例表" prop="destTable" size="small" style="width: 200px">
              <el-select
                v-model="newTaskForm.destTable"
                size="mini"
                style="width: 200px"
                placeholder="请选择"
                class="form-item-width"
                :popper-append-to-body="false"
                popper-class="options-content"
              >
                <el-option v-for="item in destTableDatas" :key="item.id" :label="item.name" :value="item.name">{{ item.name }}</el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>

        <el-form-item>
          <el-button size="small" type="primary" @click="ok('form')">{{ action.title }}传输表</el-button>
          <el-button size="small" @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </Modal>
  </div>
</template>

<script>
import { snakeCaseObject } from '@/libs/object'
import { createTransferTask } from '@/api/transfer/task'
import { errorNotify } from '@/libs/util'
import { getRdsTableList } from '@/api/rds/table'
export default {
  name: 'TaskAction',
  props: {
    taskActionModal: {
      type: Boolean,
      default: false,
      require: true
    },
    jobInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    action: {
      type: Object,
      default() {
        return {
          source: 'basic',
          title: '修改',
          type: 'update'
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      sourceTableDatas: [],
      destTableDatas: [],
      sourceInfo: {},
      destInfo: {},
      TaskForm: {},
      newTaskForm: {
        sourceTable: '',
        destTable: '',
        jobId: this.jobInfo.id
      }
    }
  },
  mounted() {
    // this.setInitModelInfo()
    this.getSourceTableList()
    this.getDestTableList()
  },
  methods: {
    cancel() {
      this.$emit('on-task-change', { type: 'cancel', status: false })
    },
    ok(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.actionTaskInfo()
        } else {
          return false
        }
      })
    },
    updateDestTable() {
      this.newTaskForm.destTable = this.newTaskForm.sourceTable
    },
    async getSourceTableList() {
      // const { sourceData } = await getRdsTableList(snakeCaseObject({ databaseId: this.jobInfo.sourceDatabase.id }))
      const { data } = await getRdsTableList(snakeCaseObject({ databaseId: 1 }))
      this.sourceTableDatas = data
    },
    async getDestTableList() {
      // const { data } = await getRdsTableList(snakeCaseObject({ databaseId: this.jobInfo.destDatabase.id }))
      const { data } = await getRdsTableList(snakeCaseObject({ databaseId: 2 }))
      this.destTableDatas = data
      console.log(this.destTableDatas)
    },
    async actionTaskInfo() {
      try {
        if (this.action.type === 'update') {
          return false
        } else if (this.action.type === 'create') {
          const { data } = await createTransferTask(snakeCaseObject(this.newTaskForm))
          this.$emit('on-task-change', { type: this.action.type, status: false, taskId: data.id })
        } else {
          return false
        }
      } catch (e) {
        errorNotify(e)
      }
    },
    setInitModelInfo() {
      this.newTaskForm = this.$lodash.cloneDeep(this.taskInfo)
    }
  }
}
</script>

<style scoped>
</style>
